<template>
    <div class="col card p10">
        <label class="title" style="align-self: center;">锅炉温度/压力/抽水</label>
        <div class="row mt">
            <div class="col card2 p10" style="align-items: center;">
                <label>蓄热罐抽水:{{ heatState.draw_reserve_info }}</label>
                <div class="row mt">
                    <el-button @click="onClickCtrl(0)" class="ml" type="success">重启</el-button>
                    <el-button @click="onClickCtrl(1)" type="info">停机</el-button>
                </div>
            </div>
            <div class="col card2 p10 ml" style="align-items: center;">
                <label>加热罐抽水:{{ heatState.draw_tank_info }}</label>
                <div class="row mt">
                    <el-button @click="onClickCtrl(2)" class="ml" type="success">重启</el-button>
                    <el-button @click="onClickCtrl(3)" type="info">停机</el-button>
                </div>
            </div>
            <div class="col card2 p10 ml" style="align-items: center;">
                <label>加热:{{ heatState.heat_info }}</label>
                <div class="row mt">
                    <el-button @click="onClickCtrl(4)" class="ml" type="success">重启</el-button>
                    <el-button @click="onClickCtrl(5)" type="info">停机</el-button>
                </div>
            </div>
        </div>
        <div class="row mt">
            <div class="col card2 p10">
                <label style="align-self: center;">蓄热罐</label>
                <div class="row_center">
                    <label class="less">温度:</label>
                    <label class="ml">{{ ctx.reserve_temp }}</label>
                    <el-checkbox class="ml" v-model="ctx.info_flag" label="详情"/>
                </div>
                <Max31855Info 
                    v-show="ctx.info_flag"
                    name="传感器详情" 
                    :state="heatState.reserve_max31855"/>
            </div>
            <div class="col ml card2 p10">
                <label style="align-self: center;">加热罐1</label>
                <div class="row_center">
                    <label class="less">温度:</label>
                    <label class="ml">{{ ctx.tank1_temp }}</label>
                    <el-checkbox class="ml" v-model="ctx.info_flag" label="详情"/>
                </div>
                <div class="row_center">
                    <label class="less">压力:</label>
                    <label class="ml">{{ heatState.tank1_kpa }}KPA</label>
                </div>
                <Max31855Info 
                    v-show="ctx.info_flag"
                    name="传感器详情" 
                    :state="heatState.tank1_max31855"/>
            </div>
            <div class="col ml card2 p10">
                <label style="align-self: center;">加热罐2</label>
                <div class="row_center">
                    <label class="less">温度:</label>
                    <label class="ml">{{ ctx.tank2_temp }}</label>
                    <el-checkbox class="ml" v-model="ctx.info_flag" label="详情"/>
                </div>
                <div class="row_center">
                    <label class="less">压力:</label>
                    <label class="ml">{{ heatState.tank2_kpa }}KPA</label>
                </div>
                <Max31855Info 
                    v-show="ctx.info_flag"
                    name="传感器详情" 
                    :state="heatState.tank2_max31855"/>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { heatState } from '../../service/heat_def';
import Max31855Info from './Max31855Info.vue';
import { watch } from 'vue';
import { dialog } from '../../service/ui';
import { heat_draw_ctrl } from '../../service/heat_cmd';

interface Ctx {
    reserve_temp: string,
    tank1_temp: string,
    tank2_temp: string,
    info_flag: boolean,
}

const ctx = reactive<Ctx>({
    reserve_temp: '未知',
    tank1_temp: '未知',
    tank2_temp: '未知',
    info_flag: true,
});

watch(() => heatState.reserve_max31855, () => {
    if (heatState.reserve_max31855.d16) {
        ctx.reserve_temp = "故障";
    } else {
        ctx.reserve_temp = `${heatState.reserve_temp}℃`;
    }

    if (heatState.tank1_max31855.d16) {
        ctx.tank1_temp = "故障";
    } else {
        ctx.tank1_temp = `${heatState.tank1_temp}℃`;
    }

    if (heatState.tank2_max31855.d16) {
        ctx.tank2_temp = '故障';
    } else {
        ctx.tank2_temp = `${heatState.tank2_temp}℃`;
    }
});

async function onClickCtrl(val: number) {

    try {
        await heat_draw_ctrl(val);
        dialog.succ('成功');
    } catch (msg) {
        dialog.err(msg);
    }
}

</script>
